<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v3.0.0-rc.0
* @link https://coreui.io
* Copyright (c) 2020 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->
<html lang="zh-CN">
  <head>
    <base href="./">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>CRUD Demo</title>
    <link rel="apple-touch-icon" sizes="57x57" href="assets/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/@coreui/icons/css/free.min.css" rel="stylesheet">
    <!-- <link href="vendors/bootstrap/bootstrap.min.css" rel="stylesheet"> -->
    <link href="vendors/select2/select2.min.css" rel="stylesheet">
    <link href="vendors/select2/select2-coreui.min.css" rel="stylesheet">
    <link href="vendors/date-range-picker/daterangepicker.min.css" rel="stylesheet">
    <link href="vendors/bootstrap-submenu/bootstrap-submenu.min.css" rel="stylesheet">
    <link href="vendors/toastr/toastr.min.css" rel="stylesheet">
    <link href="vendors/data-tables/dataTables.bootstrap4.css" rel="stylesheet">
  </head>

  <body class="c-app">

    <div class="c-wrapper c-fixed-components">
      <header class="c-header c-header-light c-header-fixed c-header-with-subheader">
        <ul class="c-header-nav d-md-down-none">
          <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Dashboard</a></li>
          <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Users</a></li>
          <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Settings</a></li>
        </ul>
        <ul class="c-header-nav ml-auto mr-4">
          <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
              <svg class="c-icon">
                <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-bell"></use>
              </svg>
            </a></li>
          <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
              <svg class="c-icon">
                <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-list-rich"></use>
              </svg>
            </a></li>
          <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
              <svg class="c-icon">
                <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-envelope-open"></use>
              </svg>
            </a></li>
          <li class="c-header-nav-item dropdown"><a class="c-header-nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <div class="c-avatar"><img class="c-avatar-img" src="assets/img/avatars/6.jpg" alt="user@email.com">
              </div>
            </a>
            <div class="dropdown-menu dropdown-menu-right pt-0">
              <div class="dropdown-header bg-light py-2"><strong>Account</strong></div>
              <a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-bell"></use>
                </svg>
                Updates<span class="badge badge-info ml-auto">42</span></a><a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-envelope-open"></use>
                </svg>
                Messages<span class="badge badge-success ml-auto">42</span></a><a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-task"></use>
                </svg>
                Tasks<span class="badge badge-danger ml-auto">42</span></a><a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-comment-square"></use>
                </svg>
                Comments<span class="badge badge-warning ml-auto">42</span></a>
              <div class="dropdown-header bg-light py-2"><strong>Settings</strong></div>
              <a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-user"></use>
                </svg>
                Profile</a><a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-settings"></use>
                </svg>
                Settings</a><a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-credit-card"></use>
                </svg>
                Payments<span class="badge badge-secondary ml-auto">42</span></a><a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-file"></use>
                </svg>
                Projects<span class="badge badge-primary ml-auto">42</span></a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-lock-locked"></use>
                </svg>
                Lock Account</a><a class="dropdown-item" href="#">
                <svg class="c-icon mr-2">
                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-account-logout"></use>
                </svg>
                Logout</a>
            </div>
          </li>
        </ul>
      </header>
      <div class="c-body">
        <main class="c-main">
          <div class="container-fluid">
            <div class="fade-in">
              <div class="card">
                <div class="card-header">
                  <div class="row">
                    <div class="col-2">
                      <div class="form-group">
                        <!--                            <label for="data-source-type" >数据源</label>-->
                        <input class="form-control" v-model="queryItem.text" type="text" title="文本值">
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="form-group">
                        <!--                            <label for="data-source-type" >数据源</label>-->
                        <div class="dropdown">
                          <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
                            Dropdown
                          </button>

                          <div class="dropdown-menu" style="">
                            <div class="dropdown dropright dropdown-submenu">
                              <button class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown">Action</button>

                              <div class="dropdown-menu">
                                <button class="dropdown-item" type="button">Sub
                                  action</button>

                                <div class="dropdown dropright dropdown-submenu">
                                  <button class="dropdown-item dropdown-toggle" type="button">Another sub action</button>

                                  <div class="dropdown-menu">
                                    <button class="dropdown-item" type="button">Sub
                                      action</button>
                                    <button class="dropdown-item" type="button">Another
                                      sub action</button>
                                    <button class="dropdown-item" type="button">Something else here</button>
                                  </div>
                                </div>

                                <button class="dropdown-item" type="button">Something else
                                  here</button>
                                <button class="dropdown-item" type="button" disabled="">Disabled action</button>

                                <div class="dropdown dropright dropdown-submenu">
                                  <button class="dropdown-item dropdown-toggle" type="button">Another action</button>

                                  <div class="dropdown-menu">
                                    <button class="dropdown-item" type="button">Sub
                                      action</button>
                                    <button class="dropdown-item" type="button">Another
                                      sub action</button>
                                    <button class="dropdown-item" type="button">Something else here</button>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="dropdown-header">Dropdown header</div>

                            <div class="dropdown dropright dropdown-submenu">
                              <button class="dropdown-item dropdown-toggle" type="button">Another action</button>

                              <div class="dropdown-menu">
                                <button class="dropdown-item" type="button">Sub
                                  action</button>
                                <button class="dropdown-item" type="button">Another sub
                                  action</button>
                                <button class="dropdown-item" type="button">Something else
                                  here</button>
                              </div>
                            </div>

                            <button class="dropdown-item" type="button">Something else
                              here</button>
                            <div class="dropdown-divider"></div>
                            <button class="dropdown-item" type="button">Separated link</button>

                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="form-group">
                        <!--                            <label for="years">年</label>-->
                        <input class="form-control date-range-picker" v-model="queryItem.period" type="text" name="date-input" placeholder="时间段">
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="form-group">
                        <!--                            <label for="statistics">统计类型</label>-->
                        <select class="multiple-select-picker form-control-sm" title="请选择统计类型" multiple="">
                          <option value="1">选项1</option>
                          <option value="2">选项2</option>
                          <option value="3">选项3</option>
                          <option value="4">选项4</option>
                          <option value="5">选项5</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-1">
                      <div class="d-flex justify-content-center align-items-center">
                        <!--<span class="input-group-addon"  id="query"><a href="#"><i class="fa fa-search"></i></a></span>-->
                        <button class="btn btn-outline-primary" type="button" onclick="query()">
                          <i class="c-icon cil-magnifying-glass"></i>
                        </button>

                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <div class="card" id="items-manage" v-cloak="">
                    <div class="card-header">
                      <i class="c-icon cil-applications"></i> <span class="lead">资源管理</span>
                      <div class="card-header-actions">
                        <a class="btn btn-ghost-primary" @click="showItemForm(null)">
                          <i class="c-icon cil-playlist-add"></i> &nbsp;新增
                        </a>
                        <a class="btn btn-ghost-danger" @click="confirmRemoveAll">
                          <i class="c-icon cil-trash"></i> &nbsp;删除
                        </a>
                      </div>

                    </div>
                    <div class="card-body">

                      <table class="table table-striped table-bordered datatable">
                        <thead>
                          <tr>
                            <th style="width: 10px">
                              <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" data-action="do-check-all" name="checkAll">
                                <label class="form-check-label" for="checkAll"></label>
                              </div>
                            </th>
                            <th>用户名</th>
                            <th>真实姓名</th>
                            <th>状态</th>
                            <th>注册时间</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(item, index) in pageItems" :key="item.id">
                            <td>
                              <div class="form-check form-check-inline">
                                <!--  data-action="do-check"
                                              v-bind:data-argument="startIndex+index" -->
                                <input class="form-check-input" type="checkbox" v-model="item.selected" v-bind:name="'item-' + item.index">#

                                {{ item.index }}
                                <label class="form-check-label" v-bind:for="'item-' + item.index"></label>
                              </div>
                            </td>
                            <td>

                              {{ item.image }}</td>
                            <td>

                              {{ item.text }}</td>
                            <td>
                              <span v-if="item.enabled" class="badge badge-success">
                                激活
                              </span>
                              <span v-else="" class="badge badge-danger">
                                禁用
                              </span></td>
                            <td>

                              {{ dateTimeFormat(item.registeredDateTime)}}</td>
                            <td>
                              <a class="btn btn-outline-success btn-sm" @click="showDetails(item)">
                                <svg class="c-icon">
                                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-description">
                                  </use>
                                </svg></a>&nbsp;
                              <a class="btn btn-outline-info btn-sm" @click="showItemForm(item)">
                                <svg class="c-icon">
                                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-pencil">
                                  </use>
                                </svg></a>&nbsp;
                              <a class="btn btn-outline-danger btn-sm" @click="confirmRemove(item)">
                                <svg class="c-icon">
                                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-x">
                                  </use>
                                </svg></a>
                              <!-- <a class="btn btn-outline-primary btn-sm"
                                                            @click="showItemForm(item)">
                                                            <i class="c-icon cil-pencil"></i><span
                                                                class="d-sm-none">&nbsp;编辑</span></a>
                                                        <a class="btn btn-outline-danger  btn-sm"
                                                            @click="confirmRemove(item)">
                                                            <i class="c-icon cil-x"></i><span
                                                                class="d-sm-none">&nbsp;删除</span></a> -->
                            </td>
                          </tr>
                          <tr>
                            <td></td>
                            <td>Anton Phunihel</td>
                            <td>2012/01/01</td>
                            <td>Member</td>
                            <td><span class="badge badge-success">Active</span></td>
                            <td><a class="btn btn-success" href="#">
                                <svg class="c-icon">
                                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-magnifying-glass">
                                  </use>
                                </svg></a><a class="btn btn-info" href="#">
                                <svg class="c-icon">
                                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-description">
                                  </use>
                                </svg></a><a class="btn btn-danger" href="#">
                                <svg class="c-icon">
                                  <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-trash">
                                  </use>
                                </svg></a></td>
                          </tr>
                        </tbody>
                      </table>

                      <div class="modal " id="confirm-modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog  modal-danger" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title" id="confirm-modal-title">危险</h4>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                              </button>
                            </div>
                            <div class="modal-body font-weight-bold" id="confirm-modal-content">
                              记录删除后将无法恢复!确定要删除吗？
                            </div>
                            <div class="modal-footer">
                              <input type="hidden" id="itemIds">
                              <button type="button" class="btn btn-danger" data-dismiss="modal" @click="removeItems">
                                确定
                              </button>
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                取消
                              </button>
                            </div>
                          </div>
                          <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                      </div>
                      <!-- /.modal #confirm-modal -->
                      <div class="modal " id="form-modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-info modal-lg" role="document" id="item-modal">
                          <div class="modal-content">
                            <form id="item-form" class="needs-validation" novalidate="">
                              <div class="modal-header">
                                <h4 class="modal-title">用户信息</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">×</span>
                                </button>
                              </div>

                              <div class="modal-body justify-content-center">

                                <div class="container-fluid">
                                  <!--<div class="row col-12">-->
                                  <div class="form-group row">
                                    <label for="username" class="col-sm-3 col-form-label">用户名</label>
                                    <div class="col-sm-9">
                                      <!-- pattern="^[-a-zA-Z0-9_\·\u4e00-\u9fa5]{2,16}$" -->
                                      <!-- pattern="^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$" -->
                                      <input class="form-control" type="text" id="username" placeholder="用户名" v-model="formItem.username" required="" pattern="^([\u4e00-\u9fa5·A-Za-z][\u4e00-\u9fa5·A-Za-z0-9-_]{1,40})$" title="">
                                      <small class="form-text text-muted">
                                        用户名命名规则：必须以英文字母或中文字符开头，2~40个字符（中文、字母、·、数字、_或-）
                                      </small>
                                      <em class="error invalid-feedback">用户名不符合命名规则</em>
                                      <!-- <div class="invalid-feedback">
                                                    用户名不能为空，并且用户名必须4到16位（字母，数字，下划线，减号）！
                                                  </div> -->
                                    </div>
                                  </div>
                                  <div class="form-group row">
                                    <label for="mobile" class="col-sm-3 col-form-label">真实姓名</label>
                                    <div class="col-sm-9">
                                      <input class="form-control" type="text" id="text" v-model="formItem.realname" placeholder="真实姓名">
                                    </div>
                                  </div>
                                  <div class="form-group row">
                                    <label for="gmtCreate" class="col-sm-3 col-form-label">注册时间</label>
                                    <div class="col-sm-9">
                                      <input class="form-control" type="text" id="gmtCreate" v-model="formItem.registeredDateTime" placeholder="注册时间" readonly="">
                                    </div>
                                  </div>

                                  <div class="form-group row">
                                    <label for="status-active" class="col-sm-3 col-form-label">状态</label>
                                    <div class="col-sm-9">
                                      <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" v-model="formItem.enabled" name="inlineRadioOptions" id="status-active" value="true">
                                        <label class="form-check-label" for="status-active">激活</label>
                                      </div>
                                      <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" v-model="formItem.enabled" name="inlineRadioOptions" id="status-forbidden" value="false">
                                        <label class="form-check-label" for="status-forbidden">禁用</label>
                                      </div>
                                    </div>
                                  </div>

                                </div>

                                <!--</div>-->
                              </div>

                              <div class="modal-footer">
                                <button type="button" class="btn btn-info" @click="saveItem">
                                  保存
                                </button>
                                <button type="button" data-dismiss="modal" class="btn btn-secondary">
                                  取消
                                </button>
                              </div>
                            </form>
                          </div>
                          <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                      </div>
                      <!-- /.modal #form-modal -->
                      <div class="modal " id="detail-modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog  modal-success  modal-lg" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">详细信息</h4>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <table>
                                <thead>
                                  <tr>
                                    <th>属性</th>
                                    <th>值</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr v-for="(value, key) in detailItem">
                                    <td>

                                      {{ key }}</td>
                                    <td>

                                      {{ value }}</td>

                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-success" data-dismiss="modal">
                                确定
                              </button>
                            </div>
                          </div>
                          <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                      </div>
                      <!-- /.modal #msg-modal -->
                    </div>
                    <div class="card-footer">
                      <div class="row justify-content-between">
                        <div class="col-lg-2 col-sm-6">
                          <div class="form-group form-inline">
                            显示&nbsp;
                            <select class="custom-select" v-model="paging.size">
                              <option v-for="option in options.paging.pageSizeList" v-bind:value="option.value">

                                {{ option.text }}
                                                        </option>
                            </select>
                            &nbsp;项/页
                          </div>
                        </div>
                        <div class="col-auto">
                          <nav aria-label="Page navigation">
                            <ul class="pagination">
                              <li class="page-item" v-for="link in pageLinks" v-bind:class="link==paging.offset+1 ? 'active' : ''">
                                <a v-if="link!='...'" class="page-link" v-on:click="paging.offset = link-1">

                                  {{ link }}</a>
                                  <a v-else="" class="page-link">

                                    {{ link }} </a>
                              </li>
                            </ul>
                          </nav>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
        <footer class="c-footer">
          <div><a href="http://www.gzcc.cn">GCC</a> © 2020 HeWenhai.</div>
          <div class="ml-auto">Powered by&nbsp;<a href="https://coreui.io/">CoreUI</a></div>
        </footer>
      </div>
    </div>
    <!-- CoreUI and necessary plugins-->
    <script src="vendors/@coreui/coreui/js/coreui.bundle.min.js"></script>
    <!--[if IE]><!-->
    <script src="vendors/@coreui/icons/js/svgxuse.min.js"></script>
    <!--<![endif]-->

    <script src="vendors/jquery/jquery-3.4.1.min.js"></script>
    <script src="vendors/bootstrap/bootstrap.min.js"></script>
    <script src="vendors/moment.min.js"></script>
    <script src="vendors/lodash/lodash.min.js"></script>
    <script src="vendors/toastr/toastr.js"></script>
    <script src="vendors/select2/select2.min.js"></script>
    <script src="vendors/date-range-picker/daterangepicker.js"></script>
    <script src="vendors/bootstrap-submenu/bootstrap-submenu.min.js"></script>
    <script src="vendors/data-tables/jquery.dataTables.js"></script>
    <script src="vendors/data-tables/dataTables.bootstrap4.min.js"></script>
    <script src="vendors/vue/vue.js"></script>
    <script src="js/vue-crud-datatables.js"></script>


  </body>
</html>